<!--  -->
<template>
  <div id="goods">
    <div class="menu-wrap" ref="menu">
      <ul class="menu">
        <li v-for="(item,index) in goods" v-bind:key="item.id" :class="{active:index===currentIndex}">
          <span class="text">
            <span v-show="item.type>0" :class="classMap[item.type]" class="logo"></span>
            {{item.name}}
          </span>
        </li>
      </ul>
    </div>
    <div class="foods-wrap" ref="foods">
      <ul class="goods">
        <li v-for="item in goods" v-bind:key="item.key" class="list-hook">
         <h2>{{item.name}}</h2>
         <ul class="footlist" v-for="food in item.foods" v-bind:key="food.key">
           <img :src="food.image">
           <div class="content">
             <h3>{{food.name}}</h3>
             <span class="desc">{{food.description}}</span>
             <div class="sr">
             <span class="sellout">
               月售{{food.sellCount}}
              </span>
              <span class="rating">
               好评率{{food.rating}}100%
              </span>
              </div>
            </div>
            <div class="catronControl-wrap">
              <catronControl :food="food"></catronControl>
            </div>
          </ul>

        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import catronControl from '../catronControl/catronControl.vue'

const ERR_OK = 0;
export default {

  data () {
    return {
      goods: [],
      classMap: [
      'discount',
      'juce',
      'special',
      'piao',
      'safe'
      ],
      heightList: [],
      scrollY
    }
  },
  created () {
    this.$http.get('/api/goods').then((response) => {
      response = response.body;
      if (response.errno === ERR_OK) {
        this.goods = response.data;
        this.$nextTick(() => {
          this._initScroll();
          this._calculateHeight();
        })
      }
    })
  },

  components: {
    catronControl
  },

  computed: {
    currentIndex () {
      for (let i = 0; i < this.heightList.length; i++) {
        let height1 = this.heightList[i];
        let height2 = this.heightList[i + 1];
        if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
          return i;
        }
      }
      return 0;
    }
  },

  mounted: {},

  methods: {
    _initScroll () {
      this.mScroll = new BScroll(this.$refs.menu, {});
      this.fScroll = new BScroll(this.$refs.foods, {
        probeType: 3,
        click: true
      });
      this.fScroll.on('scroll', (pos) => {
        this.scrollY = Math.abs(Math.round(pos.y));
      })
    },
    _calculateHeight () {
      let height = 0;
      this.heightList.push(height);
      let list = document.querySelectorAll('.list-hook');

       for (let i = 0; i < list.length; i++) {
         height += list[i].clientHeight;
          this.heightList.push(height);
       }
    }
  }
}

</script>
<style lang='less' scoped>
@menu:#f3f5f7;
.active{
  font-weight: bold;
  background: #fff
}
#goods .logo{
  width: 0.3rem;
  height: 0.3rem;
  display: inline-block;
  background-size:0.3rem 0.3rem;
  vertical-align: top;
}
#goods{
  width: 100%;
  height: 9rem;
  overflow: hidden;
  display: flex;
}
#goods>.menu-wrap{
  background-color: @menu;
  width: 1.6rem;

}
.footlist{
  position: relative;
}
.catronControl-wrap{
  position: absolute;
  right: 0.36rem;
  bottom: 0.36rem;

}
.menu{
    padding: 0 0.24rem;
}
.menu>li{
  font-size: 0.24rem;
  color: rgb(0,0,0);
  line-height: 0.28rem;
  height: 1.08rem;
  display: table;
  border-bottom: 0.01rem solid rgba(7, 17, 27,0.1);
  width: 1.12rem;
}
.text{
   vertical-align: middle;
   display: table-cell;
   width: 1.12rem;

}
.foods-wrap{
  flex:1;

}
.juce{
  background: url('./decrease_2@3x.png')
}
.special{
  background: url('./special_1@3x.png')
}
.piao{
  background: url('./invoice_1@3x.png')
}
.safe{
  background: url('./guarantee_3@3x.png')
}
.goods>li>ul{
  display: flex;
}
.goods>li>h2{
  height: 0.54rem
  background-color #f3f5f3;
  font-size: 0.24rem;
  height: 0.52rem;
  line-height: 0.52rem;
  padding-left: 0.24rem;
  color:rgb(147, 153, 159);
  border-left: 0.02rem #d9dde1 solid;

}
.content{
  margin-left: 0.2rem;
}
.goods>li>ul{
  padding: 0.36rem;
  background: #fff;
  color: rgb(147, 153, 159);
  font-size: 0.2rem;
  line-height: 0.2rem;
  border-bottom: 0.01rem solid rgba(7, 17, 27,0.1);
}
.content>h3{
  color: #000;
  font-weight: bold;
  line-height: 0.28rem;
  font-size: 0.28rem;
  margin-bottom: 0.16rem;
}
.desc{
  margin-bottom: 0.16rem;
  display: block;
}
.goods img{
  height: 1.28rem;
  width: 1.28rem;
  border-radius: 0.1rem;
}

</style>
